<div class="workBox">
    <div class="workFlex">
        <div class="workTabSwitch">
        	<h1>工程技能体系</h1>
            <ul>
                <li ng-click="WorkAll()" class="workAllFir" ng-class="{'workColor':current == false}">全部</li>
                <li  ng-repeat="item in worktab track by $index" ng-class="{'workColor':current== (item.tcId)}"  ng-bind="item.tcName" id="{{ item.tcId }}"  ng-click="switchData(item)"></li>
            </ul>
        </div>
        <div class="workSkillCon">
            <div class="workSkillConTop">
                <h1>共<span ng-bind="totalItem"></span>个技能</h1>
                <div class="workSort">
                    <a  ng-click="DateColor()" class="dateUp-{{ !isDisabled }}"  href="javascript:;">
                        <span>时间</span>
                    </a>
                    <a  ng-click="peopleColor()" class="peopleNum-{{ peopecolor }}" href="javascript:;">
                        <span>人气</span>
                    </a>
                </div>
            </div>
                <div class="workAll">
                    <ul>
                        <li ng-repeat="item in ConList" class="workListCon">
                 
                                <div class="workImg" ng-click="linkSwitch(item)">
                                    <img src="them/imgs/noSrc.png" ng-src="{{ item.previewPath }}" alt="..." />
                                </div>
                                <div class="workTit" >
                                    <h1 ng-bind="item.title" ng-click="linkSwitch(item)"></h1>

                                    <div class="labelist">
                                    	<span ng-if="item3.labelName!='undefined' && item3.labelName!=''" ng-repeat="item3 in item.labelList" ng-click="linkSearch(item3.labelName)" ng-bind="item3.labelName">
                                    	</span>
                                    </div>
                                    <ul class="workUl">
                                        <li ng-repeat="item2 in item.skillFileVoList" ng-click="linkfile(item2.fileId)" ng-bind="item2.name" id="{{ item2.skillId }}"></li>
                                    </ul>
                                </div>
                                <div class="workTime" ng-bind="item.createTime|dateFilter">
                                </div>
                      
                        </li>
                        <no-content conf-type="'eng'" conf-content="noContent" ng-if="ConList.length == 0"></no-content>
                    </ul>
                    <div class="workListBottom">
                        <ui-pagination  ng-if="paginationConf" conf="paginationConf"></ui-pagination>
                    </div>
                </div>
        </div>
        <div class="workSamllList">
            <div class="DowdRank">
                <h1>下载排行</h1>
                <div class="DowdCon">
                    <dl ng-repeat="item in RankCon track by $index">
                        <dt>
                        <span ng-bind="($index)+1" ng-style="content[$index]"></span>
                        <p></p>
                        </dt>
                        <dd>
                            <a id="{{ item.skillId }}" ng-click="goTo(item)" ng-bind="item.title"></a>
                            <span ng-bind="item.downloadCount"></span>
                        </dd>
                    </dl>
                </div>
            </div>
            <!--<div class="hotSearch">
                <h1>热搜词</h1>
                <ul>
                    <li ng-repeat="item in hotseachCon track by $index" ng-bind="item.name"  id="{{ item.keyWordId }}"></li>
                </ul>
            </div>-->
        </div>
    </div>
</div>
<style>
    .workBox {
        width:100%;
        background: #f8f8f8;
        overflow: hidden;
    }
        .workFlex {
            width:1200px;
            height:auto;
            margin:0 auto;
            overflow: hidden;
            margin-bottom:30px;
        }
        .workTabSwitch {
            width:100%;
            height:92px;
        }
        .workTabSwitch h1{
        	float: left;
        	font-size: 22px;
        	margin-top: 30px;
        	margin-right: 50px;
        }
         .workTabSwitch ul{
         	float: left;
         }
            .workTabSwitch ul li {
            	cursor: pointer;
                margin-top:30px;
                float: left;
                padding: 0 20px 0 20px ;
                height:30px;
                line-height: 30px;
                border:1px solid #dcdcdc;
                margin-right:20px;
                color: #666;
            }
            .workTabSwitch ul li.workColor {
                color: #31a3ff;
                border:1px solid #31a3ff;
            }
    .workSkillCon {
        width:870px;
        clear: both;
        background-color: #fff;
        float: left;
    }
        .workSkillConTop {
            width:100%;
            height:55px;
            line-height:55px;
            border-bottom:1px solid #ddd;
        }
            .workSkillConTop h1 {
                float: left;
                padding-left:20px;
                font-size:12px;
            }
            .workSkillConTop h1 span{
                color: #30a3ff;
                font-size: 18px;
                margin-left: 5px;
                margin-right: 6px;
            }
            .workSkillConTop .workSort {
                float: right;
                padding-right:30px;
            }
                .workSkillConTop .workSort a {
                    display: inline-block;
                }
                .workSkillConTop .workSort a.dateUp-true,.workSkillConTop .workSort a.dateUp-false {
                    padding-right:35px;
                    background: url("them/imgs/bottom.png") no-repeat 29px 23px;

                }
                .workSkillConTop .workSort a.dateUp-true{
                    padding-right:35px;
                    color:rgb(48, 163, 255);
                    background: url("them/imag/top-blue-arrow.png") no-repeat 29px 23px;
                }
                .workSkillConTop .workSort a.peopleNum-false {
                    padding-left: 15px;
                    padding-right:20px;
                    color: #000;
                    background: url("them/imgs/bottom.png") no-repeat 44px 23px;
                }
                .workSkillConTop .workSort a.peopleNum-true{
                    padding-left: 15px;
                    padding-right:20px;
                    color:rgb(48, 163, 255);
                    background: url("them/imag/top-blue-arrow.png") no-repeat 44px 23px;
                }
    .workAll{
        clear: both;
        background-color: #fff;
        overflow: hidden;
    }
    .workAll ul li.workListCon {
        width:870px;
        height:170px;
        border-bottom:1px solid #ddd;
    }
    .workAll ul li:hover{
        background: #f8f8f8;
    }
    .workAll ul li .workImg,.workTit,.workNotes,.workTime {
        margin:28px 0 0 20px;
        float: left;
    }
        .workImg,.workImg img {
            width:211px;
            height:132px;
        }
        .workImg img:hover {
            cursor: pointer;
        }
        .workTit {
            margin-left:30px;
            width:228px;
            height:102px;
            position: relative;
        }
        .workTit .labelist {
        	width: 100%;
        	height: 20px;
        	margin-top: 10px;
        }
        .workTit .labelist span{
        	display: block;
        	float: left;
        	height: 100%;
        	border: 1px solid #ddd;
        	color: #ddd;
        	margin-right: 10px;
        	padding-left: 10px;
        	padding-right: 10px;
        }
         .workTit .labelist span:hover{
         	cursor:pointer;
         }
        .workTit .labelist span:nth-child(1){
        	border: 1px solid #bdd2f2;
        	color:#bdd2f2;
        }
        	.workTit ul.workUl {
        		position: absolute;
        		left: 0;
        		top: 35px;
        		width: 662px;
        	}
        	.workTit ul.workUl li {
        		float: left;
        		width: 272px;
        		margin-bottom: 6px;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
        	}
        	.workTit ul.workUl li:hover{
        		cursor: pointer;
        	}
            .workTit h1 {
                font-size:16px;
            }
            .workTit h1:hover{
            	cursor: pointer;
            }
            .workTit ul {
                margin-top:20px;
            }
            .workTit ul li {
                height:20px;
                width:100%;
                font-size:12px;
                color: #666;
                background: url("them/imgs/zfxs.png") no-repeat 0 10px;
                padding-left:14px;
            }
        .workNotes {
            margin-left:20px;
            width:216px;
            height:102px;
        }
            .workNotes h2 {
                height:18px;
                margin:0;
                padding:0;
            }
            .workNotes h2 ul li {
                margin-right:10px;
                padding-left:19px;
                padding-right:19px;
                height:18px;
                border:1px solid #ddd;
                font-size:12px;
                font-weight:normal;
                float: left;
                text-align: center;
                line-height:18px;
            }
             .workNotes h2 ul li.couseColor {
                 border:1px solid #96b9e9;
                 color: #96b9e9;
             }
            .workNotes ul.noteCon {
                clear: both;
                margin-top:15px;
            }
            .workNotes ul.noteCon li {
                height:20px;
                width:100%;
                font-size:12px;
                color: #666;
                background: url("them/imgs/zfxs.png") no-repeat 0 10px;
                padding-left:14px;
            }
        .workTime {
            float: right;
            margin-right:30px;
        }
    .workSamllList {
            float: right;
            width:310px;
            overflow: hidden;
        }
    /*热门回答*/
    .hotApply {
        width:100%;
        background: #fff;
        height:587px;
    }
    .hotSearch h1,.DowdRank h1,.hotApply h1 {
            width: 265px;
            height: 53px;
            line-height: 53px;
            border-bottom: 1px #ddd solid;
            padding-left: 43px;
            overflow: hidden;
            background: url(them/imgs/zfx.png)14px 21px no-repeat;
            background-size: 14px 14px;
            font-size: 16px;
            color: #010101;
        }
        .hotApplyCon {
            overflow: hidden;
        }
        .hotApply dl {
            width:280px;
            height:38px;
            margin:20px 0 0 15px;
        }
        .hotApply dl dt {
            margin-right:20px;
            width:36px;
            height:36px;
            float: left;
            text-align: center;
        }
        .hotApply dl dt span {
            display: block;
        }
        .hotApply dl dd p {
            margin-bottom:10px;
        }
        .hotApply dl dd span {
            padding-right:146px;
            color: #bbb;
        }
        .hotApply dl dd b{
            font-weight:normal;
            color: #bbb;
        }
        .hotrequ {
            clear: both;
            width:102px;
            height:23px;
            margin:0 auto;
            margin-top:20px;
            text-align: center;
            line-height:23px;
            position: relative;
        }
            .hotrequ span {
                position: absolute;
                top:13px;
                display: block;
                width:100%;
                height:10px;
                border:1px solid #30a3ff;
                border-top:none;
            }
    .DowdRank {
        width:100%;
        height:570px;
      
        background: #fff;
        overflow: hidden;
    }
        .DowdCon {
            width:280px;
            overflow: hidden;
            margin:22px 0 0 15px;
        }
        .DowdCon dl {
            width:280px;
            height:54px;
            margin-bottom:8px;
        }
        .DowdCon dl dt {
            font-size:14px;
            width:25px;
            height:20px;
            background: #fff;
            z-index: 2;
            float: left;

        }
        .DowdCon dl dt p {
            width:0px;
            height:33px;
            border-right:1px solid #ddd;
            margin-left:3px;
        }
        .DowdCon dl dd {
            width:256px;
        }
        .DowdCon dl dd span {
            display: block;
            width:47px;
            height:13px;
            background:url("them/imgs/dowdIcon.jpg") no-repeat 0 2px;
            float: right;
            padding-left:14px;
        }
    .hotSearch {
        width:100%;
        height:170px;
        background: #fff;
        margin-top:30px;
    }
        .hotSearch ul {
            width:280px;
            margin-left:15px;
            margin-top:20px;
        }
        .hotSearch ul li {
            float: left;
            color: #30a3ff;
            margin:0 9px 6px 0;
            width:82px;
            height:37px;
            text-align: center;
            line-height:37px;
            border:1px solid #ddd;
            border-radius: 36%;
            _background: url("them/imgs/searchIcon.jpg") no-repeat;
        }
    /*字体一行一个颜色。变态*/

</style>